<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        #messages{
            background-color: #fff;
            box-shadow: 0 0 5px #888;
            font-size: 1.1em;
            max-width: 15em;
            padding: 0.5em;
            position: absolute;
            right: 20px;
            top: 20px;
            z-index: 40;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map;
        var tb;
        //按钮相应函数
        function onDrawRect(){
//            alert("点击了按钮");
//            map.disableMapNavigation();
            tb.activate(esri.toolbars.Draw.EXTENT);    //激活相应的图形
        }
        require([
            "esri/map", "esri/layers/FeatureLayer",
            "esri/tasks/query", "esri/geometry/Circle",
            "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
            "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!","esri/symbols/PictureFillSymbol","dojo/on"
        ], function(
                Map, FeatureLayer,
                Query, Circle,
                Graphic, InfoTemplate, SimpleMarkerSymbol,
                SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
                esriConfig, Color, dom,PictureFillSymbol,on
        ) {
            // use a proxy page if a URL generated by this page is greater than 2000 characters
            //
            // this should not be needed as nearly all query & select functions are performed on the client
            esriConfig.defaults.io.proxyUrl = "/proxy";

            map = new Map("mapDiv", {
                basemap: "streets",
                center: [-95.249, 38.954],
                zoom: 14,
                slider: false
            });

            //add the census block points in on demand mode. Note that an info template has been defined so when
            //selected features are clicked a popup window will appear displaying the content defined in the info template.
            var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
                infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
                outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
            });

            // selection symbol used to draw the selected census block points within the buffer polygon
            var symbol = new SimpleMarkerSymbol(
                    SimpleMarkerSymbol.STYLE_CIRCLE,
                    12,
                    new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color([0,255, 255]),
                            2
                    ),
                    new Color([207, 34, 171, 0.5])
            );
            featureLayer.setSelectionSymbol(symbol);

            //make unselected features invisible
            var defaultSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
                    12,
                    new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_NULL,
                            new Color([255, 255, 0, 0.9]),
                            1
                    ),
                    new Color([255, 0, 0, 0.5])).setSize(10);
            featureLayer.setRenderer(new SimpleRenderer(defaultSymbol));

            map.addLayer(featureLayer);

            //////////////////////////////////////////////////////////////////////////////////

            //绘制矩形
            map.on("load", drawRect);


            function drawRect() {
                tb = new esri.toolbars.Draw(map);
                tb.on("draw-end", addGraphic);
            }

            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                // alert("addGraphic");
                tb.deactivate();
                map.enableMapNavigation();

                map.graphics.add(new Graphic(evt.geometry, symbol));

                //进行查询
                var query = new Query();
                query.geometry = evt.geometry;
                /*query.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
                 query.where = "NAME = '" + stateName + "'"; */
                featureLayer.queryFeatures(query, selectFeature);
            }
            function selectFeature(response){
                var feature;
                var features = response.features;
                var inBuffer = [];

                for (var i = 0; i < features.length; i++) {
                    feature = features[i];
                    inBuffer.push(feature.attributes[featureLayer.objectIdField]);
                }
                var query = new Query();
                query.objectIds = inBuffer;
                //use a fast objectIds selection query (should not need to go to the server)
                featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
                    var re="";
                    for(var i=0;i<results.length;i++){
                        var feature = results[i];
                        re += feature.attributes["TRACT"]+"|";
                    }
//                    alert("查询结果 TRACT: "+re);
                });
            }
        });
    </script>
</head>

<body>
<div id="info">
    <button id="Extent" onclick="onDrawRect()">拉框查询</button>
</div>
<div id="mapDiv"></div>

</body>
</html>